<template>
  <div class="category">
    <h4>
        <span 
        :class="{'orange-border-bottom':current_category==category.id,'orange-color':current_category==category.id,'hover-orange-color':true}"
            v-for="(category,index) in category_list"
            v-if='index<11'
            :key="category.id"
            @click="getId(category.id,index)"
            @mouseenter="mouseenter(index)"
            @mouseleave="mouseleave"
        >
            {{ category.name }}
            <ul class="orange-border" v-show="hover_index === index">
                <li 
                v-for="snd_category in category.snd_category"
                :key='snd_category.id'
                >
                    <i class="light-gray">{{ snd_category.name }} ：</i>
                    <span class="hover-orange-color"
                    v-for="(trd_category,trd_index) in snd_category.trd_category"
                    v-if='trd_index<5'
                    :key="trd_category.id"
                    >{{ trd_category.name }}</span>
                    <router-link class="orange-color" to=''>更多 >></router-link>
                </li>
            </ul>
        </span>
        
    </h4>
  </div>
</template>
<script>
    import { mapState,mapMutations } from 'vuex';
    export default{
        props:{
            getCategoryId:{
                type: Function,
                default: ()=>{},
            }
        },
        data(){
            return {
                current_category: 1,
                hover_index: ''
            }
        },
        computed:mapState(['category_list']),
        created(){
            this.getPlasticlist();
            this.getId(this.category_list[0].id);
        },
        methods: {
            ...mapMutations(['getPlasticlist']),
            getId(id,index){
                this.current_category = id;
                this.getCategoryId(id);
                this.hover_index = '';
            },
            mouseenter(index){
                this.hover_index = index;
            },
            mouseleave(){
                this.hover_index = '';
            }
        },
    }
</script>
<style lang="less" scoped>
.category{
    position: relative;
    h4{
      margin-top: 50px;
      margin-bottom: 20px;
      line-height: 30px;
      white-space: nowrap;
      overflow: hidden;
      >span{
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        margin: 0 30px 0 5px;
        // &:hover{
        //     ul{
        //         display: block;
        //     }
        // }
      }
    }
    .hide{
        display: none;
    }
    ul{
        padding: 10px 30px 10px 10px;
        // display: none;
        position: absolute;
        width: 100%;
        height: 360px;
        overflow-y: scroll;
        left: 0;
        top: 30px;
        z-index: 5;
        background: #fff;
        li{
            line-height: 40px;
            i{
                display: inline-block;
                width: 120px;
                text-align: right;
            }

            span{
                cursor: pointer;
                display: inline-block;
                min-width: 80px;
                margin-left: 20px;
            }
            a{
                float: right;
            }
        }
    }

}
</style>

